<template>
  <div class='xtx-wrapper'>
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card" v-if="currStep!==4">
        <h3>忘记密码</h3>
        <xtx-step :currStep="currStep" :steps="steps" style="padding:0 100px"></xtx-step>
        <div class="check-account" v-if="currStep===1">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>用户名：</label>
              <input type="text" v-model="account" placeholder="输入用户名称">
            </div>
            <div class="xtx-form-item">
              <label>验证码：</label>
              <input type="text" v-model="captchaCode" placeholder="输入图形验证码">
            </div>
            <div class="xtx-form-item">
              <label></label>
              <div class="captcha">
                <img :src="captcha" alt="">
                <span>看不清？</span>
                <a href="javascript:;" @click="setCaptcha()">换一张</a>
              </div>
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="checkAccount()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
        <div class="check-mobile" v-if="currStep===2">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>用户名：</label>
              <input type="text" :value="mobile" readonly>
            </div>
            <div class="xtx-form-item">
              <label>验证码：</label>
              <input type="text" v-model="mobileCode" placeholder="短信验证码">
              <span class="code" @click="getMobileCode()">{{sendText}}</span>
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="checkMobile()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
        <div class="set-password" v-if="currStep===3">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>新的密码：</label>
              <input type="password" v-model="password" placeholder="设置6至20位字母、数字和符号组合">
            </div>
            <div class="xtx-form-item">
              <label>重复密码：</label>
              <input type="password" v-model="rePassword" placeholder="请再次输入上面密码">
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="setPassword()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
      </div>
      <div class="xtx-card" v-else>
        <div class="xtx-success-box">
          <span class="iconfont icon-queren2"></span>
          <p class="tit">密码重置成功</p>
          <p class="desc">下次请使用新密码进行登录</p>
          <a class="btn" @click="success()" href="javascript:;">重新登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
export default {
  name: 'forget-page',
  data () {
    return {
      currStep: 1,
      steps: [
        { title: '填写用户名' },
        { title: '验证身份' },
        { title: '设置新密码' },
        { title: '完成' }
      ],
      captcha: '',
      // 票据
      ticket: '',
      // 校验用户名
      uuid: '',
      account: '',
      captchaCode: '',
      // 验证手机
      mobile: '',
      mobileCode: '',
      sendText: '发送验证码',
      // 设置密码
      password: '',
      rePassword: ''
    }
  },
  created () {
    this.setCaptcha()
  },
  methods: {
    async setCaptcha () {
      this.uuid = uuidv4()
      this.captcha = this.$http.defaults.baseURL + '/reset/verification?uuid=' + this.uuid
    },
    async checkAccount () {
      const { account, captchaCode: code, uuid } = this
      if (account && code) {
        try {
          const { data } = await this.$http.get('/reset/account/check', {
            params: {
              account, code, uuid
            }
          })
          this.mobile = data.result.mobile
          this.ticket = data.result.ticket
          this.currStep = 2
        } catch (e) {
          this.$message({ type: 'error', message: e.response.data.message })
        }
      } else {
        this.$message({ type: 'warn', message: '请填写用户名和验证码' })
      }
    },
    async getMobileCode () {
      await this.$http.get('/reset/mobile/code', { params: { ticket: this.ticket } })
      if (this.mobile && !this.timer) {
        let time = 60
        this.sendText = '60s后重发'
        this.timer = setInterval(() => {
          time = time - 1
          if (time <= 0) {
            window.clearInterval(this.timer)
            this.timer = null
            this.sendText = '发送验证码'
          } else {
            this.sendText = `${time}s后重发`
          }
        }, 1000)
      }
    },
    async checkMobile () {
      const { mobile, mobileCode: code, ticket } = this
      if (mobile && code && ticket) {
        try {
          const { data } = await this.$http.get('/reset/mobile/check', {
            params: {
              ticket, code
            }
          })
          this.ticket = data.result.ticket
          this.currStep = 3
        } catch (e) {
          this.$message({ type: 'error', message: e.response.data.message })
        }
      } else {
        this.$message({ type: 'warn', message: '请填写短信验证码' })
      }
    },
    async setPassword () {
      const { password, rePassword, ticket } = this
      if (password && rePassword && ticket) {
        if (!/^\w{6,20}$/.test(password)) {
          return this.$message({ type: 'warn', message: '密码是6-20个字符' })
        }
        if (password !== rePassword) {
          return this.$message({ type: 'warn', message: '两次密码需要一致' })
        }
        try {
          await this.$http.put('/reset/password', {
            ticket, password
          })
          this.currStep = 4
        } catch (e) {
          this.$message({ type: 'error', message: e.response.data.message })
        }
      } else {
        this.$message({ type: 'warn', message: '请填写新密码和确认密码' })
      }
    },
    success () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/register.less";
</style>
